<template>
  <div class="con table-gl-con">
    <a-layout class="layout-con">
      <a-layout-sider class="sider">
        <div class="title">订单详情</div>

        <ul style="margin-top: 20px">
          <li>
            <span class="label-text">平台：</span>
            <span>{{ detailInfo.platform }} </span>
          </li>
          <li>
            <span class="label-text">订单来源：</span>
            <span>{{ detailInfo.source == 'OFFLINE' ? '手动创建' : 'API接口' }} </span>
          </li>
          <li>
            <span class="label-text">平台单号：</span>
            <a-typography-paragraph copyable style="margin-bottom: 0; display: flex">
              <div class="text-limit" style="width: 140px">{{ detailInfo.platformOrderNumber }}</div>
            </a-typography-paragraph>
          </li>
          <li>
            <span class="label-text">履约方式：</span>
            <span>{{ detailInfo.fulfillmentType ? detailInfo.fulfillmentType : '--' }} </span>
          </li>
          <li>
            <span class="label-text">店铺：</span>
            <span>{{ detailInfo.shopName ? detailInfo.shopName : '--' }} </span>
          </li>
          <li>
            <span class="label-text">站点：</span>
            <span>{{ detailInfo.marketplaceName ? detailInfo.marketplaceName : '--' }} </span>
          </li>
          <li>
            <span class="label-text">买家姓名：</span>
            <span>{{ detailInfo.buyerName ? detailInfo.buyerName : '--' }} </span>
          </li>
          <li class="clearfix">
            <div class="label-text">买家邮箱：</div>
            <TextHidden :rows="1" position="top">{{ detailInfo.buyerEmail ? detailInfo.buyerEmail : '--' }}</TextHidden>
          </li>

          <li>
            <span class="label-text">创建时间：</span>
            <span>{{ $setTime(detailInfo.gmtCreate) }} </span>
          </li>
          <li>
            <span class="label-text">下单时间：</span>
            <span>{{ $setTime(detailInfo.gmtPurchase) }} </span>
          </li>
          <li>
            <span class="label-text">支付时间：</span>
            <span>{{ $setTime(detailInfo.gmtPay) }} </span>
          </li>
          <li>
            <span class="label-text">审核时间：</span>
            <span>{{ $setTime(detailInfo.gmtPay) }} </span>
          </li>
          <li>
            <span class="label-text">标发货时间：</span>
            <span>{{ $setTime(detailInfo.gmtVirtualShip) }} </span>
          </li>
          <li>
            <span class="label-text">实际发货时间：</span>
            <span>{{ $setTime(detailInfo.gmtShip) }} </span>
          </li>
        </ul>
      </a-layout-sider>

      <a-layout-content class="content">
        <div class="top">
          <div class="log">
            <a-button @click="showLogDialog = true" class="gray-outline" size="mini">
              <template #icon>
                <span class="icon icon-jurassic_log"></span>
              </template>
              日志
            </a-button>
          </div>

          <div>
            <span style="font-size: 16px">{{ detailInfo.platformOrderNumber }}</span>
            <span class="status">{{ filterStatus(detailInfo.status) }}</span>
            <span class="type">{{ detailInfo.fulfillmentType }}</span>
          </div>
          <div>
            <span>标签：</span>
            <a-tag v-for="(item, index) of tagList" :style="{ marginLeft: '5px', color: '#2C4358', background: item.color }" style="margin-right: 5px;color">{{ item.name }}</a-tag>
            <a-tag bordered :checkable="true" color="arcoblue" @click="tag.visible = true">设置标签</a-tag>
          </div>
          <div style="margin-top: 5px">
            <span>承诺发货时间：</span>
            <span>{{ $setTime(detailInfo.gmtLatestShip) }}</span>
            <span style="margin-left: 10px; color: red">
              <span>剩余</span>
              <a-countdown class="cut-down-time" :now="now" :value="detailInfo.gmtLatestShip ? new Date(detailInfo.gmtLatestShip).valueOf() : now" format="D 天 H 时 m 分 s 秒" />
            </span>
          </div>
        </div>
        <div class="middle">
          <div class="left">
            <div class="title clearfix" style="line-height: 30px">
              <span class="fl">配送地址</span>
              <a-button :disabled="$extract(detailInfo, 'address.isLock') == true" style="margin-top: 6px" size="mini" class="gray-outline ml10 fl" @click="editAddress.visible = true">修改地址</a-button>
              <icon-lock @click="lock(false)" v-if="$extract(detailInfo, 'address.isLock')" class="highlight fl ml10" style="font-size: 24px; margin-top: 5px; cursor: pointer" />
              <icon-unlock @click="lock(true)" v-else class="highlight fl ml10" style="font-size: 24px; margin-top: 5px; cursor: pointer" />
            </div>
            <div class="left-con">
              <ul>
                <li>
                  <span>收件人：</span>
                  <span>{{ $extract(detailInfo, 'address.userName') || '--' }}</span>
                </li>
                <li>
                  <span>国家：</span>
                  <span>{{ $extract(detailInfo, 'address.country') || '--' }}</span>
                </li>
                <li>
                  <span>电话：</span>
                  <span>{{ $extract(detailInfo, 'address.phoneNumber') || '--' }}</span>
                </li>
                <li>
                  <span>省/州：</span>
                  <span>{{ $extract(detailInfo, 'address.stateOrRegion') || '--' }}</span>
                </li>
                <li>
                  <span>邮编：</span>
                  <span>{{ $extract(detailInfo, 'address.postalCode') || '--' }}</span>
                </li>
                <li>
                  <span>城市：</span>
                  <span>{{ $extract(detailInfo, 'address.city') || '--' }}</span>
                </li>
                <li style="display: flex">
                  <div style="width: 45px">地址1：</div>
                  <div style="flex: 1">
                    {{ $extract(detailInfo, 'address.address') }}
                    <!-- <TextLimit style="width: 100px" position="top" :rows="1">{{ $extract(detailInfo, 'address.address') }}</TextLimit> -->
                  </div>
                </li>
                <li style="display: flex">
                  <div style="width: 45px">地址2：</div>
                  <div style="flex: 1">
                    {{ $extract(detailInfo, 'address.address1') }}
                    <!-- <TextLimit style="width: 100px" position="top" :rows="1">{{ $extract(detailInfo, 'address.address1') }}</TextLimit> -->
                  </div>
                </li>
                <li style="display: flex">
                  <div style="width: 45px">地址3：</div>
                  <div style="flex: 1">
                    {{ $extract(detailInfo, 'address.address2') }}
                    <!-- <TextLimit style="width: 100px" position="top" :rows="1">{{ $extract(detailInfo, 'address.address2') }}</TextLimit> -->
                  </div>
                </li>
                <li style="display: flex">
                  <div style="width: 60px">买家留言：</div>
                  <div style="flex: 1">
                    {{ $extract(detailInfo, 'buyerLeaveMessage') }}
                    <!-- <TextLimit style="width: 100px" position="top" :rows="1">{{ $extract(detailInfo, 'address.address2') }}</TextLimit> -->
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="right">
            <div class="title clearfix">
              <div class="fl">订单备注</div>
              <div class="fr">
                <a-button size="mini" class="gray-outline" @click="showRemarkModal('order', detailInfo)">添加备注</a-button>
              </div>
            </div>
            <a-scrollbar style="height: 150px; overflow: auto" class="right-con">
              <ul>
                <li v-for="item of remarkList">
                  <div class="top">
                    <div>{{ item.createUname ? item.createUname.slice(0, 1) : '张' }}</div>
                    <div>{{ item.createUname ? item.createUname : '张张' }}</div>
                    <div>{{ $setTime(item.gmtCreate) }}</div>
                  </div>
                  <div class="text">
                    <TextLimit position="top">{{ item.remark }} </TextLimit>
                  </div>
                </li>
              </ul>
            </a-scrollbar>
          </div>
        </div>
        <div class="footer">
          <a-tabs v-model:active-key="currentPage">
            <a-tab-pane key="1" title="订单明细" class="tab-pane">
              <div style="border: 1px solid #d7d7d7; min-width: 1260px">
                <div class="table-title">
                  <div class="item" style="width: 120px">平台订单号</div>
                  <div class="item" style="width: 60px">图片</div>
                  <div class="item" style="width: 100px">MSKU/ASIN</div>
                  <div class="item" style="width: 100px">SKU</div>
                  <div class="item" style="width: 100px">销售员</div>
                  <div class="item" style="width: 100px">购买数量</div>
                  <div class="item" style="width: 100px">发货数量</div>
                  <div class="item" style="width: 100px">售价/优惠</div>
                  <div class="item" style="width: 100px">定制进度</div>
                  <div class="item" style="width: 120px">包装</div>
                  <div class="item" style="width: 320px">商品备注</div>
                </div>
                <a-scrollbar style="max-height: 600px; overflow: auto">
                  <div class="table-con">
                    <div class="con-item" v-for="item of detailInfo.packageList">
                      <div class="item-hd">
                        <div style="width: 200px">
                          <div class="clearfix">
                            <div class="text-label fl"> 包裹号：</div>
                            <div class="value fl">{{ item.packageNumber }}</div>
                          </div>
                          <div class="clearfix">
                            <div class="text-label fl">状态：</div>
                            <div class="value fl">{{ filterPackageStatus(item) }}</div>
                          </div>
                        </div>
                        <div style="width: 200px">
                          <div class="clearfix">
                            <div class="text-label fl"> 配送方：</div>
                            <div class="value fl">{{ item.fulfillmentType }}</div>
                          </div>
                          <div class="clearfix">
                            <div class="text-label fl">发货仓：</div>
                            <div class="value fl">
                              <TextHidden position="top" :rows="1">{{ item.warehouseName }}</TextHidden>
                            </div>
                          </div>
                        </div>
                        <div style="width: 200px">
                          <div class="clearfix">
                            <div class="text-label fl"> 实际发货时间：</div>
                          </div>
                          <div class="clearfix"> {{ $setTime(detailInfo.gmtShip) }} </div>
                        </div>
                        <div style="width: 200px">
                          <div class="clearfix">
                            <div class="text-label fl"> 渠道：</div>
                            <div class="value fl">
                              <TextHidden position="top" :rows="1">{{ item.shippingMethodName }}</TextHidden>
                            </div>
                          </div>
                          <div class="clearfix">
                            <div class="text-label fl">承运商：</div>
                            <div class="value fl">{{ item.carrier }}</div>
                          </div>
                        </div>
                        <div style="width: 200px">
                          <div class="clearfix">
                            <div class="text-label fl"> 运单号：</div>
                            <div class="value fl">{{ item.outOrderNumber }}</div>
                          </div>
                          <div class="clearfix">
                            <div class="text-label fl">跟踪号：</div>
                            <div class="value fl">
                              <TextHidden position="top" :rows="1">{{ item.trackingNumber }}</TextHidden>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="item-bd clearfix">
                        <div class="bill-no" style="width: 120px; height: auto">{{ detailInfo.platformOrderNumber }}</div>
                        <div style="display: flex; flex: 1">
                          <div style="width: 60px; border-right: 1px solid #d7d7d7">
                            <div class="data-item" v-for="productItem of item.packageItemList">
                              <ImgPopover :src="getImage(productItem)">
                                <template #con>
                                  <img width="40" height="40" :src="getImage(productItem)" />
                                </template>
                              </ImgPopover>
                            </div>
                          </div>
                          <div style="width: 100px; border-right: 1px solid #d7d7d7">
                            <div class="data-item" v-for="productItem of item.packageItemList">
                              <div class="highlight">{{ productItem.msku }}</div>
                              <div class="highlight">{{ productItem.asin }}</div>
                            </div>
                          </div>
                          <div style="width: 100px; border-right: 1px solid #d7d7d7">
                            <div class="data-item" v-for="productItem of item.packageItemList">
                              <div class="highlight">{{ productItem.productSku }}</div>
                            </div>
                          </div>
                          <div style="width: 100px; border-right: 1px solid #d7d7d7">
                            <div class="data-item" v-for="productItem of item.packageItemList">
                              {{ productItem.salerName }}
                            </div>
                          </div>
                          <div style="width: 100px; border-right: 1px solid #d7d7d7">
                            <div class="data-item" v-for="productItem of item.packageItemList">
                              {{ productItem.qtyOrdered }}
                            </div>
                          </div>
                          <div style="width: 100px; border-right: 1px solid #d7d7d7">
                            <div class="data-item" v-for="productItem of item.packageItemList">
                              {{ productItem.qtyShipped }}
                            </div>
                          </div>
                          <div style="width: 100px; border-right: 1px solid #d7d7d7">
                            <div class="data-item" v-for="productItem of item.packageItemList">
                              <div>{{ currencyObj[productItem.currency] }}{{ productItem.amtSell }}</div>
                              <div>{{ currencyObj[productItem.currency] }}{{ productItem.amtDiscount }}</div>
                            </div>
                          </div>
                          <div style="width: 100px; border-right: 1px solid #d7d7d7">
                            <div class="data-item" v-for="productItem of item.packageItemList">
                              <!-- {{ productItem.qtyShipped }} -->
                            </div>
                          </div>
                          <div style="width: 120px; border-right: 1px solid #d7d7d7">
                            <div class="data-item" v-for="productItem of item.packageItemList">
                              {{ productItem.qtyShipped }}
                            </div>
                          </div>
                          <div style="flex: 1">
                            <div class="data-item" style="text-align: left" v-for="productItem of item.packageItemList">
                              <div>{{ productItem.remark }}</div>
                              <div class="highlight"><icon-edit @click="showRemarkModal('product', productItem)" /></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a-scrollbar>
              </div>
            </a-tab-pane>
            <a-tab-pane key="2" title="订单费用" class="tab-pane">
              <div v-if="feeData.length == 1">
                <p>
                  <span>订单汇率：1 美元 = {{ feeData[0].toCnyRate }} 人民币</span>
                  <span style="margin-left: 10px">订单合计毛利：￥{{ feeData[0].totalGrossProfit }}</span>
                </p>

                <a-table :data="feeData[0].amountList" :bordered="{ cell: true }" :pagination="false" style="margin-top: 10px" size="mini" class="table-two-line" :scroll="{ y: '400px' }">
                  <template #columns>
                    <a-table-column title="图片" :width="60" #cell="{ record, rowIndex }">
                      <ImgPopover :src="record.productPic">
                        <template #con>
                          <a-image :preview="false" width="40" height="40" fit="contain" :src="record.productPic" />
                        </template>
                      </ImgPopover>
                    </a-table-column>
                    <a-table-column title="MSKU/ASIN" :width="120" #cell="{ record }">
                      <div class="highlight">
                        {{ record.msku ? record.msku : '--' }}
                      </div>
                      <div class="highlight">
                        {{ record.asin ? record.asin : '--' }}
                      </div>
                    </a-table-column>
                    <a-table-column title="SKU" :width="120" #cell="{ record }">
                      <div class="highlight">
                        {{ record.productSku ? record.productSku : '--' }}
                      </div>
                    </a-table-column>
                    <a-table-column title="数量" :width="100" #cell="{ record }">
                      <div class="highlight">
                        {{ record.qtyOrdered ? record.qtyOrdered : '--' }}
                      </div>
                    </a-table-column>
                    <a-table-column :title="getTitle('收益')">
                      <a-table-column title="售价" :width="100" #cell="{ record }">
                        {{ $extract(record, 'sell.amount') }}
                      </a-table-column>
                      <a-table-column title="优惠" :width="100" #cell="{ record }">
                        {{ $extract(record, 'discount.amount') }}
                      </a-table-column>
                      <a-table-column title="包装" :width="100" #cell="{ record }">
                        {{ $extract(record, 'packageSell.amount') }}
                      </a-table-column>
                      <a-table-column title="运费" :width="100" #cell="{ record }">
                        {{ $extract(record, 'ship.amount') }}
                      </a-table-column>
                      <a-table-column title="税费" :width="100" #cell="{ record }">
                        {{ $extract(record, 'tax.amount') }}
                      </a-table-column>
                      <a-table-column title="其他" :width="100" #cell="{ record }">
                        {{ $extract(record, 'otherRevenue.amount') }}
                      </a-table-column>
                      <a-table-column title="合计" :width="100" #cell="{ record }">
                        <div>{{ $extract(record, 'totalRevenue.amount') }}</div>
                        <div>￥{{ $extract(record, 'totalRevenueCny.amount') }}</div>
                      </a-table-column>
                    </a-table-column>
                    <a-table-column :title="getTitle('平台支出')">
                      <a-table-column title="佣金" :width="100" #cell="{ record }">
                        {{ $extract(record, 'platCommission.amount') }}
                      </a-table-column>
                      <a-table-column title="扣税" :width="100" #cell="{ record }">
                        {{ $extract(record, 'platTax.amount') }}
                      </a-table-column>
                      <a-table-column title="FBA运费" :width="100" #cell="{ record }">
                        {{ $extract(record, 'platShip.amount') }}
                      </a-table-column>
                      <a-table-column title="其他支出" :width="100" #cell="{ record }">
                        {{ $extract(record, 'platOtherExpend.amount') }}
                      </a-table-column>
                      <a-table-column title="合计" :width="100" #cell="{ record }">
                        <div>{{ $extract(record, 'totalExpend.amount') }}</div>
                        <div>￥{{ $extract(record, 'totalExpendCny.amount') }}</div>
                      </a-table-column>
                    </a-table-column>
                    <a-table-column title="成本(CNY)">
                      <a-table-column title="FBM运费" :width="100" #cell="{ record }">
                        {{ $extract(record, 'fbmShip.amount') }}
                      </a-table-column>
                      <a-table-column title="产品成本" :width="100" #cell="{ record }">
                        {{ $extract(record, 'productCost.amount') }}
                      </a-table-column>
                      <a-table-column title="包材成本" :width="100" #cell="{ record }">
                        {{ $extract(record, 'packageCost.amount') }}
                      </a-table-column>
                      <a-table-column title="其他成本" :width="100" #cell="{ record }">
                        {{ $extract(record, 'otherCost.amount') }}
                      </a-table-column>
                      <a-table-column title="合计" :width="100" #cell="{ record }">
                        {{ $extract(record, 'totalCost.amount') }}
                      </a-table-column>
                    </a-table-column>
                    <a-table-column title="毛利润(CNY)" :width="100" #cell="{ record }">
                      {{ $extract(record, 'grossProfit.amount') }}
                    </a-table-column>
                    <a-table-column title="毛利率" :width="100" #cell="{ record }">
                      {{ record.grossProfitRate }}
                    </a-table-column>
                  </template>
                </a-table>
              </div>

              <div v-if="feeData.length > 1">
                <a-tabs v-model:active-key="amountPage" class="tab-pane" @tab-click="amountTabClick">
                  <a-tab-pane v-for="item of feeData" :key="item.orderId" :title="item.platformOrderNumber" class="tab-pane">
                    <p>
                      <span>订单汇率：1 美元 = {{ item.toCnyRate }} 人民币</span>
                      <span style="margin-left: 10px">订单合计毛利：￥{{ item.totalGrossProfit }}</span>
                    </p>

                    <a-table :data="item.amountList" :bordered="{ cell: true }" :pagination="false" style="margin-top: 10px" size="mini" class="table-two-line" :scroll="{ y: '400px' }">
                      <template #columns>
                        <a-table-column title="图片" :width="60" #cell="{ record, rowIndex }">
                          <ImgPopover :src="record.productPic">
                            <template #con>
                              <a-image :preview="false" width="40" height="40" fit="contain" :src="record.productPic" />
                            </template>
                          </ImgPopover>
                        </a-table-column>
                        <a-table-column title="MSKU/ASIN" :width="120" #cell="{ record }">
                          <div class="highlight">
                            {{ record.msku ? record.msku : '--' }}
                          </div>
                          <div class="highlight">
                            {{ record.asin ? record.asin : '--' }}
                          </div>
                        </a-table-column>
                        <a-table-column title="SKU" :width="120" #cell="{ record }">
                          <div class="highlight">
                            {{ record.productSku ? record.productSku : '--' }}
                          </div>
                        </a-table-column>
                        <a-table-column title="数量" :width="100" #cell="{ record }">
                          <div class="highlight">
                            {{ record.qtyOrdered ? record.qtyOrdered : '--' }}
                          </div>
                        </a-table-column>

                        <a-table-column title="应发/已发" :width="100" #cell="{ record }">
                          <div> {{}}/{{}} 暂未定义</div>
                        </a-table-column>

                        <a-table-column :title="getTitle('收益')">
                          <a-table-column title="售价" :width="100" #cell="{ record }">
                            {{ $extract(record, 'sell.amount') }}
                          </a-table-column>
                          <a-table-column title="优惠" :width="100" #cell="{ record }">
                            {{ $extract(record, 'discount.amount') }}
                          </a-table-column>
                          <a-table-column title="包装" :width="100" #cell="{ record }">
                            {{ $extract(record, 'packageSell.amount') }}
                          </a-table-column>
                          <a-table-column title="运费" :width="100" #cell="{ record }">
                            {{ $extract(record, 'ship.amount') }}
                          </a-table-column>
                          <a-table-column title="税费" :width="100" #cell="{ record }">
                            {{ $extract(record, 'tax.amount') }}
                          </a-table-column>
                          <a-table-column title="其他" :width="100" #cell="{ record }">
                            {{ $extract(record, 'otherRevenue.amount') }}
                          </a-table-column>
                          <a-table-column title="合计" :width="100" #cell="{ record }">
                            <div>{{ $extract(record, 'totalRevenue.amount') }}</div>
                            <div>￥{{ $extract(record, 'totalRevenueCny.amount') }}</div>
                          </a-table-column>
                        </a-table-column>
                        <a-table-column :title="getTitle('平台支出')">
                          <a-table-column title="佣金" :width="100" #cell="{ record }">
                            {{ $extract(record, 'platCommission.amount') }}
                          </a-table-column>
                          <a-table-column title="扣税" :width="100" #cell="{ record }">
                            {{ $extract(record, 'platTax.amount') }}
                          </a-table-column>
                          <a-table-column title="FBA运费" :width="100" #cell="{ record }">
                            {{ $extract(record, 'platShip.amount') }}
                          </a-table-column>
                          <a-table-column title="其他支出" :width="100" #cell="{ record }">
                            {{ $extract(record, 'platOtherExpend.amount') }}
                          </a-table-column>
                          <a-table-column title="合计" :width="100" #cell="{ record }">
                            <div>{{ $extract(record, 'totalExpend.amount') }}</div>
                            <div>￥{{ $extract(record, 'totalExpendCny.amount') }}</div>
                          </a-table-column>
                        </a-table-column>
                        <a-table-column title="成本(CNY)">
                          <a-table-column title="FBM运费" :width="100" #cell="{ record }">
                            {{ $extract(record, 'fbmShip.amount') }}
                          </a-table-column>
                          <a-table-column title="产品成本" :width="100" #cell="{ record }">
                            {{ $extract(record, 'productCost.amount') }}
                          </a-table-column>
                          <a-table-column title="包材成本" :width="100" #cell="{ record }">
                            {{ $extract(record, 'packageCost.amount') }}
                          </a-table-column>
                          <a-table-column title="其他成本" :width="100" #cell="{ record }">
                            {{ $extract(record, 'otherCost.amount') }}
                          </a-table-column>
                          <a-table-column title="合计" :width="100" #cell="{ record }">
                            {{ $extract(record, 'totalCost.amount') }}
                          </a-table-column>
                        </a-table-column>
                        <a-table-column title="毛利润(CNY)" :width="100" #cell="{ record }">
                          {{ $extract(record, 'grossProfit.amount') }}
                        </a-table-column>
                        <a-table-column title="毛利率" :width="100" #cell="{ record }">
                          {{ record.grossProfitRate }}
                        </a-table-column>
                      </template>
                    </a-table>
                  </a-tab-pane>
                </a-tabs>
              </div>

              <p style="margin: 5px 0; font-size: 14px">亚马逊订单财务数据</p>

              <div style="display: flex">
                <FilterTable :filterItem="filterItem" :isReset="false" :is-show-tag="false" @search="searchByVal" />
                <a-button class="gray-outline" :loading="getOrderFinanceLoading" @click="getSyncAmzOrderFinancials">获取订单财务信息</a-button>
              </div>
              <a-table :data="financialDataList" :bordered="{ cell: true }" :pagination="false" style="margin-top: 0px" size="mini" class="table-two-line" :scroll="{ y: '400px' }">
                <template #columns>
                  <a-table-column title="序号" :width="40" #cell="{ rowIndex }">
                    {{ rowIndex + 1 }}
                  </a-table-column>
                  <a-table-column title="结算时间" :width="140" #cell="{ record }">
                    {{ $setTime(record.gmtPosted) }}
                  </a-table-column>
                  <a-table-column title="originItemId" :width="140" #cell="{ record }">
                    {{ record.platOrderItemId }}
                  </a-table-column>
                  <a-table-column title="MSKU" :width="120" #cell="{ record }">
                    {{ record.msku }}
                  </a-table-column>
                  <a-table-column title="费用类型" :width="60" #cell="{ record }">
                    <TextLimit position="top" :rows="2">{{ record.eventType }}</TextLimit>
                  </a-table-column>
                  <a-table-column title="数量" :width="60" #cell="{ record }">
                    {{ record.qtyShipped }}
                  </a-table-column>
                  <a-table-column title="费用项目" :width="60" #cell="{ record }">
                    <TextLimit position="top" :rows="2">{{ record.amountType }}</TextLimit>
                  </a-table-column>
                  <a-table-column title="金额(市场货币)" :width="100" #cell="{ record }">
                    {{ record.amount }}
                  </a-table-column>
                  <a-table-column title="金额(CNY)" :width="80" #cell="{ record }">
                    {{ record.amountCny }}
                  </a-table-column>
                  <a-table-column title="更新时间" :width="140" #cell="{ record }">
                    {{ $setTime(record.gmtWrite) }}
                  </a-table-column>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane v-if="multiChannelOrderDocList && multiChannelOrderDocList[0]" key="3" title="多渠道配送" class="tab-pane">
              <div class="channels-order-con">
                <a-tabs v-if="multiChannelOrderDocList.length > 1" @change="channelOrderTabChange" v-model:active-key="multiChannelOrderIndex" class="tab-pane">
                  <a-tab-pane v-for="(item, index) in multiChannelOrderDocList" :key="index" :title="item.packageNumber" class="tab-pane"></a-tab-pane>
                </a-tabs>

                <a-button @click="showTrackEvent" class="gray-outline">物流事件跟踪</a-button>
                <a-button @click="syncOrder" :loading="asyncBtnLoading" class="gray-outline ml10">同步配送单</a-button>
                <a-row style="margin-top: 10px">
                  <a-col :span="8">
                    <div class="text">站点：</div>
                    <div class="value">{{ $getMarketplaceName(currentChannelOrderInfo.marketplaceId) }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">店铺：</div>
                    <div class="value">{{ currentChannelOrderInfo.shopName }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">配送速度：</div>
                    <div class="value">{{ shippingSpeedCategoryEnum(currentChannelOrderInfo) }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">商家订单号：</div>
                    <div class="value">{{ $extract(currentChannelOrderInfo, 'fulfillmentOrder.sellerFulfillmentOrderId') }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">订单状态：</div>
                    <div class="value">{{ $extract(currentChannelOrderInfo, 'fulfillmentOrder.fulfillmentOrderStatus') }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">装箱备注：</div>
                    <div class="value">{{ $extract(currentChannelOrderInfo, 'fulfillmentOrder.displayableOrderComment') }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">货件ID：</div>
                    <div class="value">{{ $extract(currentChannelOrderInfo, 'fulfillmentShipment.amazonShipmentId') }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">运营中心：</div>
                    <div class="value">{{ $extract(currentChannelOrderInfo, 'fulfillmentShipment.fulfillmentCenterId') }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">包裹编号：</div>
                    <div class="value">{{ $extract(currentChannelOrderInfo, 'packageNumber') }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">货件状态：</div>
                    <div class="value">{{ $extract(currentChannelOrderInfo, 'fulfillmentShipment.fulfillmentShipmentStatus') }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">承运商：</div>
                    <div class="value">{{ filtercarrierCode(currentChannelOrderInfo, 'carrierCode') }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">跟踪号：</div>
                    <div class="value">{{ filtercarrierCode(currentChannelOrderInfo, 'trackingNumber') }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">发货时间：</div>
                    <div class="value">{{ filterTime(currentChannelOrderInfo, '1') }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">预计送达时间：</div>
                    <div class="value">{{ filterTime(currentChannelOrderInfo, '2') }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">更新时间：</div>
                    <div class="value">{{ filterTime(currentChannelOrderInfo, '3') }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">包裹交付状态：</div>
                    <div class="value">{{ filtercarrierCode(currentChannelOrderInfo, 'currentStatus') }}</div>
                  </a-col>
                  <a-col :span="8">
                    <div class="text">附加位置信息：</div>
                    <div class="value">{{ filtercarrierCode(currentChannelOrderInfo, 'additionalLocationInfo') }}</div>
                  </a-col>
                </a-row>
                <div class="order-table-con clearfix">
                  <a-table size="mini" class="table-singe-line" :pagination="false" :scroll="{ y: '300px' }" :data="currentChannelOrderInfo.fulfillmentOrderItems">
                    <template #columns>
                      <a-table-column title="图片" #cell="{ record }" :width="120">
                        <a-image :src="record.productPic" :width="40" :height="40"></a-image>
                      </a-table-column>
                      <a-table-column title="sku" #cell="{ record }">
                        {{ record.productSku }}
                      </a-table-column>
                      <a-table-column title="MSKU" #cell="{ record }">
                        {{ record.sellerSku }}
                      </a-table-column>
                      <!-- <a-table-column title="FNSKU" #cell="{ record }">
                        {{ record.fnsku }}
                      </a-table-column> -->
                      <a-table-column title="数量" #cell="{ record }">
                        {{ record.quantity }}
                      </a-table-column>
                    </template>
                  </a-table>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
  <Tag ref="tag" :dataList="tagList" @save="saveTag" type="oms" />
  <Remark ref="remark" :type="remarkType" :info="remarkData" @save="getDetail" />
  <EditAddress ref="editAddress" :info="detailInfo" @save="getDetail" />
  <CommonLogsDialog v-if="showLogDialog" api="listOrderLogs" :id="detailInfo.id" :isShow="showLogDialog" @closed="showLogDialog = false" />
  <TrackingEcents ref="trackEvent" :list="TrackEventList" />
</template>

<script lang="ts">
  import { defineComponent, ref, onUnmounted } from 'vue'
  import { useRoute } from 'vue-router'
  import { reactive } from 'vue'
  import { toRefs } from 'vue'
  import { getShopMarketAll } from '@/api/base'
  import { listVOByParam, syncAmzOrderFinancials, updateOrderAddressLock, getOrderDetail, addFBMorderTagBatch, cancelFBMorderTagBatch, syncMultiChannelOrder } from '@/api/order'
  import { Message } from '@arco-design/web-vue'
  import { currencySymbol } from '@/utils/globalData'
  import FilterTable from '@/components/TableFilter.vue'
  import TextLimit from '@/components/textLimit.vue'
  import Tag from '../../components/tag/tagList.vue'
  import Remark from './remark.vue'
  import EditAddress from './editAddress.vue'
  import CommonLogsDialog from '@/components/Log/logsDialog.vue'
  import TrackingEcents from './trackingEvents.vue'
  import _ from 'lodash-es'
  import dayjs from 'dayjs'
  export default defineComponent({
    components: {
      FilterTable,
      TextLimit,
      Tag,
      Remark,
      EditAddress,
      CommonLogsDialog,
      TrackingEcents,
    },
    setup() {
      const route = useRoute()
      const tag = ref()
      const remark = ref()
      const editAddress = ref()
      const trackEvent = ref()
      const data: any = reactive({
        currentPage: '1',
        now: Date.now(),
        feeData: [],
        multiChannelOrderDocList: [],
        financialDataList: [],
        TrackEventList: [],
        updateUserLoading: false,
        getOrderFinanceLoading: false,
        asyncBtnLoading: false,
        filterItem: [
          {
            key: 'mskuList',
            label: '请输入MSKU',
            value: ref(),
            type: 'input_search',
            width: 140,
          },
          {
            key: 'eventTypeList',
            label: '费用类型',
            value: ref(),
            type: 'input_search',
            width: 140,
          },
          {
            key: 'amountTypeList',
            label: '费用项目',
            value: ref(),
            type: 'input_search',
            width: 140,
          },
          {
            key: 'date',
            label: '结算日期',
            value: ref(),
            type: 'date_range',
            width: 240,
            attrs: {
              placeholder: ['结算开始日期', '结算结束日期'],
              // defaultValue: [`${dayjs().format('YYYY-MM-DD')} 00:00:00`, `${dayjs().add(1, 'month').format('YYYY-MM-DD')} 23:59:59`],
              'allow-clear': true,
            },
          },
        ],
        detailInfo: {},
        tagList: [],
        remarkList: [],
        itemList: [],
        searchValue: {},
        packageList: [],
        currencyObj: currencySymbol,
        remarkType: '',
        remarkData: {},
        showLogDialog: false,
        amountPage: '',
        multiChannelOrderIndex: 0,
        currentChannelOrderInfo: {},
      })

      const searchByVal = (val: any) => {
        console.log(val)

        let obj = _.cloneDeep(val)
        data.searchValue = {}
        for (const key in obj) {
          if (key == 'date' && obj[key]) {
            data.searchValue.startDate = `${obj[key][0]} 00:00:00`
            data.searchValue.endDate = `${obj[key][1]} 23:59:59`
          } else {
            data.searchValue[key] = obj[key]
          }
        }
        getListVOByParam()
      }

      // onUnmounted(() => {
      //   visitedRoute.removeVisitedRoute(route)
      // })

      const getDetail = async () => {
        const res = await getOrderDetail({ id: route.query.id })
        data.detailInfo = res?.data
        data.tagList = data.detailInfo?.tagList || []
        data.remarkList = data.detailInfo?.remarkList || []
        data.itemList = data.detailInfo?.itemList || []
        data.feeData = data?.detailInfo?.packOrderAmountList || [{}]
        data.multiChannelOrderDocList = data?.detailInfo?.multiChannelOrderDocList || []
        data.currentChannelOrderInfo = data.multiChannelOrderDocList[0]
        // if (data.feeData.length > 1) {
        data.amountPage = data.feeData[0].orderId
        // }
        getMarketList()

        if (data.feeData[0]) {
          getListVOByParam(data.feeData[0].orderId)
        }
      }

      const getMarketList = async () => {
        const res = await getShopMarketAll()
        let arr = res?.data || []

        let obj = arr.find((e: any) => e.marketplaceId == data.detailInfo.marketplaceId)
        data.detailInfo.marketplaceName = obj?.marketplaceName
      }

      const filterLevel = () => {
        let text = ''
        let flag = data.detailInfo?.shipping?.shippingLevel || ''
        if (flag == 'Standard') {
          text = '标准'
        } else if (flag == 'Expedited') {
          text = '加急'
        } else {
          text = '--'
        }
        return text
      }

      const filterStatus = (num: number) => {
        let text = ''
        if (num == 201) {
          text = '已退款'
        } else if (num == -200) {
          text = '已退货'
        } else if (num >= -199 && num <= -100) {
          text = '已取消'
        } else if (num >= 200 && num <= 299) {
          switch (num) {
            case 201:
              text = '待审核'
              break
            case 202:
              text = '待发货'
              break
            case 203:
              text = '部分发货'
              break
            case 204:
              text = '多渠道中'
              break
          }
        } else if (num >= 600 && num <= 699) {
          text = ' 已发货'
        }
        return text
      }

      const getListVOByParam = async (id?: string) => {
        let params = {
          orderIdList: id,
          ...data.searchValue,
        }
        const res = await listVOByParam(params)
        data.financialDataList = res?.data || []
      }

      const getSyncAmzOrderFinancials = async () => {
        data.getOrderFinanceLoading = true
        try {
          let params = {
            dataSource: 'mysql',
            orderId: data.amountPage,
          }
          await syncAmzOrderFinancials(params)
          Message.success('更新成功')
          data.getOrderFinanceLoading = false
        } catch (error) {
          data.getOrderFinanceLoading = false
        }
        getListVOByParam(data.amountPage)
        getDetail()
      }

      const getTitle = (title: string) => {
        // '收益(' + detailInfo.currency + ')'
        if (data.detailInfo.currency) {
          return `${title}(${data.detailInfo.currency})`
        } else {
          return title
        }
      }

      const saveTag = async (ids: Array<string>, done: (closed: boolean) => void, type: string) => {
        let params = {
          orderIdList: [data.detailInfo.id],
          tagIdList: ids,
        }

        let res: any = {}

        if (type == 'add') {
          res = await addFBMorderTagBatch(params)
        } else {
          res = await cancelFBMorderTagBatch(params)
        }

        if (res.code == 'SUCCESS') {
          type == 'add' ? Message.success('添加标签成功') : Message.success('删除标签成功')
          tag.value.visible = false
          setTimeout(() => {
            getDetail()
          }, 1000)
        }
        done(true)
      }

      const lock = async (type: boolean) => {
        let params = {
          addressId: data.detailInfo?.address.id || '',
          lock: type,
        }
        const res = await updateOrderAddressLock(params)
        getDetail()
      }

      const getImage = (item: any) => {
        if (item.isCustom) {
          let arr = item.customPics ? item.customPics.split(',') : []
          return arr[0]
        } else {
          return item.productPic
        }
      }

      const showRemarkModal = (type: string, item: any) => {
        data.remarkType = type
        data.remarkData = item
        remark.value.visible = true
      }

      const amountTabClick = () => {
        getListVOByParam(data.amountPage)
      }

      const syncOrder = async () => {
        try {
          data.asyncBtnLoading = true
          const res = await syncMultiChannelOrder(data.multiChannelOrderDocList[0].packageId)
        } catch (error) {}
        data.asyncBtnLoading = false
        Message.success('同步多渠道订单成功')
        getDetail()
      }

      const shippingSpeedCategoryEnum = (info: any) => {
        let text = ''
        let type = info?.fulfillmentOrder?.shippingSpeedCategory || ''
        if (type == 'Standard') {
          text = '标准'
        } else if (type == 'Expedited') {
          text = '加急'
        } else {
          text = '优先'
        }
        return text
      }

      const filtercarrierCode = (info: any, type: string) => {
        let arr = info?.fulfillmentOrderPackageTrackingDetails || []
        if (arr[0]) {
          return arr[0][type]
        } else {
          return '--'
        }
      }

      const filterTime = (info: any, type: string) => {
        if (type == '1') {
          if (info.fulfillmentShipment && info.fulfillmentShipment.shippingDate) {
            return dayjs(info.fulfillmentShipment.shippingDate).format('YYYY-MM-DD HH:mm:ss')
          }
        } else if (type == '2') {
          if (info.fulfillmentShipment && info.fulfillmentShipment.estimatedArrivalDate) {
            return dayjs(info.fulfillmentShipment.estimatedArrivalDate).format('YYYY-MM-DD HH:mm:ss')
          }
        } else if (type == '3') {
          if (info.fulfillmentOrder && info.fulfillmentOrder.statusUpdatedDate) {
            return dayjs(info.fulfillmentOrder.statusUpdatedDate).format('YYYY-MM-DD HH:mm:ss')
          }
        }
      }

      const showTrackEvent = () => {
        console.log(data.multiChannelOrderDocList[data.multiChannelOrderIndex])

        let fulfillmentOrderPackageTrackingDetails = data.multiChannelOrderDocList[data.multiChannelOrderIndex].fulfillmentOrderPackageTrackingDetails || []
        let list = fulfillmentOrderPackageTrackingDetails[0].trackingEvents || []
        data.TrackEventList = list
        if (!list[0]) {
          return Message.error('暂无物流事件记录')
        }

        data.TrackEventList.map((e: any) => {
          e.carrierCode = fulfillmentOrderPackageTrackingDetails[0].carrierCode
          e.trackingNumber = fulfillmentOrderPackageTrackingDetails[0].trackingNumber
          return e
        })

        trackEvent.value.visible = true
      }

      const channelOrderTabChange = (index: string | number) => {
        data.currentChannelOrderInfo = {}
        data.currentChannelOrderInfo = data.multiChannelOrderDocList[index]
      }

      const filterPackageStatus = (item: any) => {
        let text = ''
        switch (item.status) {
          case 'TO_CHECK':
            text = '待审核'
            break
          case 'TO_HAND':
            text = '待处理'
            break
          case 'IN_PICKING':
            text = '拣货中'
            break
          case 'TO_OUTBOUND':
            text = '待出库'
            break
          case 'HAS_OUTBOUND':
            text = '已出库'
            break
          case 'HAS_SHIPPED':
            text = '已运出'
            break
          case 'ERROR_TRACK':
            text = '跟踪异常'
            break
          case 'HAS_DELIVERY':
            text = '已交付'
            break
          default:
            text = '未知'
            break
        }
        return text
      }

      getDetail()
      return {
        ...(toRefs(data) as any),
        searchByVal,
        filterLevel,
        filterStatus,
        getSyncAmzOrderFinancials,
        getTitle,
        tag,
        saveTag,
        remark,
        getDetail,
        editAddress,
        lock,
        getImage,
        showRemarkModal,
        amountTabClick,
        syncOrder,
        shippingSpeedCategoryEnum,
        filtercarrierCode,
        filterTime,
        trackEvent,
        showTrackEvent,
        channelOrderTabChange,
        filterPackageStatus,
      }
    },
  })
</script>

<style lang="less" scoped>
  .channels-order-con {
    padding: 5px 10px;
    box-sizing: border-box;

    .arco-col {
      display: flex;
      margin-bottom: 10px;
    }

    .text {
      width: 90px;
      text-align: right;
    }

    .order-table-con {
      width: 100%;
    }
  }
  .table-title {
    min-width: 1260px;
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    background-color: #f2f3f5;
    .item {
      text-align: center;
      border-right: 1px solid #d7d7d7;
      &:last-child {
        border-right: none;
      }
    }
    // text-align: center;
  }

  .table-con {
    min-width: 1260px;
    .con-item {
      width: 100%;

      .item-hd {
        height: 60px;
        padding: 10px 10px 0;
        box-sizing: border-box;
        background-color: #f7f8fa;
        display: flex;
        font-size: 13px;
        border-top: 1px solid #d7d7d7;
        border-bottom: 1px solid #d7d7d7;
      }
      .item-bd {
        min-width: 1260px;
        display: flex;
        .bill-no {
          border-right: 1px solid #d7d7d7;
        }
        .data-item {
          padding-top: 15px;
          min-height: 65px;
          text-align: center;
          // line-height: 65px;
          border-bottom: 1px solid #d7d7d7;
          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
  }

  .con {
    height: calc(100vh - @menuHeight);
    font-size: 12px;
    .layout-con {
      width: 100%;
      height: 100%;
    }
    .sider {
      width: 280px !important;
      height: 100%;
      padding: 5px 10px;
      overflow: hidden;
      .title {
        font-size: 16px;
        font-weight: 700;
      }
      .order-billno {
        display: flex;
      }

      ul {
        li {
          display: flex;
          margin-bottom: 5px;
        }
      }

      span {
        display: inline-block;
      }

      .label-text {
        color: #aaaaaa;
        width: 100px;
      }
    }
    .content {
      margin-left: 5px;
      // display: flex;
      .top {
        // height: 100px;
        padding: 10px;
        box-sizing: border-box;
        background-color: white;
        position: relative;
        .log {
          position: absolute;
          right: 10px;
          top: 10px;
        }
        span {
          display: inline-block;
        }
        .status {
          height: 20px;
          line-height: 20px;
          text-align: center;
          margin: 10px 10px;
          padding: 0 10px;
          box-sizing: border-box;
          color: white;
          background-color: #169bd5;
          border-radius: 10px;
        }

        .type {
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: black;
          padding: 0 10px;
          background-color: #facd91;
        }
      }
      .middle {
        margin: 5px 0;
        display: flex;
        .left {
          width: 800px;
          background-color: white;
          padding: 10px;
          .title {
            font-size: 16px;
            margin-bottom: 10px;
          }
          .left-con {
            width: 100%;
            ul {
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              li {
                width: 50%;
                margin-bottom: 10px;
              }
            }
          }
        }
        .right {
          flex: 1;
          margin-left: 5px;
          background-color: white;
          padding: 5px;
          box-sizing: border-box;
          .title {
            font-size: 16px;
            margin-bottom: 10px;
          }
          .right-con {
            height: 200px;
            overflow: auto;
            ul {
              li {
                .top {
                  display: flex;
                  div {
                    &:nth-child(1) {
                      width: 20px;
                      height: 20px;
                      text-align: center;
                      line-height: 20px;
                      background-color: #169bd5;
                      color: white;
                      border-radius: 50%;
                    }
                    &:nth-child(2) {
                      margin: 0 5px;
                    }
                    &:nth-child(3) {
                      color: #aaaaaa;
                    }
                  }
                }

                .text {
                  padding: 0 10px;
                }
              }
            }
          }
        }
      }

      .footer {
        // height: 100%;
        background-color: white;
        .tab-pane {
          padding: 10px;
          box-sizing: border-box;
        }
      }
    }
  }

  .cut-down-time {
    :deep(.arco-statistic-value) {
      font-size: 12px;
      color: red;
      margin-left: 10px;
    }
  }
</style>
